<template>
    <div>
        btnState:{{btnState}}
        <button :class="{'blue':!btnState}" @click="add">{{btnState?'已在书架':'添加书架'}}</button>
    </div>
</template>
<script>
export default {
    props:['state','id'],
    data(){
        return {
            btnState:this.state
        }
    },
    watch:{
        state(val){
            this.btnState = val;
        }
    },
    methods:{
        add(){
            if(!this.btnState){
                this.btnState = true;
                this.$bus.$emit('add',this.btnState,this.id);
            }else{
                alert("已经添加过")
            }
        }
    }
}
</script>
<style>
    .blue{
        color: blue;
    }
</style>

